<!DOCTYPE html>
<html lang="en" class="full-height">

<head>
  <!-- Required meta tags always come first -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design Bootstrap Template</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="../css/mdb.min.css" rel="stylesheet">
  <style>

    html,
        body,
        header,
        .jarallax {
          height: 700px;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .jarallax {
            height: 100vh;
          }
        }

        @media (min-width: 800px) and (max-width: 850px) {
          html,
          body,
          header,
          .jarallax {
            height: 100vh;
          }
        }

        @media (min-width: 560px) and (max-width: 650px) {
          header .jarallax h1 {
            margin-bottom: .5rem !important;
          }
          header .jarallax h5 {
            margin-bottom: .5rem !important;
          }
        }


        @media (min-width: 660px) and (max-width: 700px) {
          header .jarallax h1 {
            margin-bottom: 1.5rem !important;
          }
          header .jarallax h5 {
            margin-bottom: 1.5rem !important;
          }
        }

        .top-nav-collapse {
            background-color: #9da4b1 !important;
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: #9da4b1 !important;
            }
        }

        @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: #9da4b1!important;
            }
        }

        footer.page-footer {
            background-color: #9da4b1;
        }

    </style>
</head>

<body>

  <!--Main Navigation-->
  <header>

    <!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="#"><strong>MDB</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
          aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Profile</a>
            </li>
          </ul>
          <form class="form-inline">
            <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </div>
          </form>
        </div>
      </div>
    </nav>

    <!-- Intro Section -->
    <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('https://mdbootstrap.com/img/Photos/Others/gradient2.png'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
      <div class="mask rgba-purple-slight">
        <div class="container h-100 d-flex justify-content-center align-items-center">
          <div class="row pt-5 mt-3">
            <div class="col-md-12 wow fadeIn mb-3">
              <div class="text-center">
                <h1 class="display-4 font-weight-bold mb-5 wow fadeInUp">Our New Course is Ready</h1>
                </li>
                <h5 class="mb-5 wow fadeInUp" data-wow-delay="0.2s">It comes with a lot of new features, easy to follow
                  videos and images. Check it out now!</h5>
                <div class="wow fadeInUp" data-wow-delay="0.4s">
                  <a class="btn btn-purple btn-rounded"><i class="fas fa-user left"></i> Sign up!</a>
                  <a class="btn btn-outline-purple btn-rounded"><i class="fas fa-book left"></i> Learn more</a>
                </div>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </header>
  <!--Main Navigation-->

  <!--Main Layout-->
  <main>

    <div class="container">

      <!--Section: Features v.4-->
      <section class="section wow fadeIn" data-wow-delay="0.3s">

        <!--Section heading-->
        <h1 class="font-weight-bold text-center h1 my-5">Why is it so great?</h1>
        <!--Section description-->
        <p class="text-center grey-text mb-5 mx-auto w-responsive lead">Lorem ipsum dolor sit amet, consectetur
          adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas
          nostrum quisquam eum porro a pariatur accusamus veniam.</p>

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-md-4">

            <!--Grid row-->
            <div class="row mb-2">
              <div class="col-2">
                <i class="fas fa-2x fa-flag-checkered indigo-text"></i>
              </div>
              <div class="col-10">
                <h5 class="font-weight-bold mb-4">International</h5>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  nam, aperiam minima assumenda.</p>
              </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row mb-2">
              <div class="col-2">
                <i class="fas fa-2x fa-flask blue-text"></i>
              </div>
              <div class="col-10">
                <h5 class="font-weight-bold mb-4">Experimental</h5>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  nam, aperiam minima assumenda.</p>
              </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row mb-2">
              <div class="col-2">
                <i class="fas fa-2x fa-glass-martini cyan-text"></i>
              </div>
              <div class="col-10">
                <h5 class="font-weight-bold mb-4">Relaxing</h5>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  nam, aperiam minima assumenda.</p>
              </div>
            </div>
            <!--Grid row-->

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 mb-2 text-center text-md-left flex-center">
            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4">

            <!--Grid row-->
            <div class="row mb-2">
              <div class="col-2">
                <i class="fas fa-2x fa-heart deep-purple-text"></i>
              </div>
              <div class="col-10">
                <h5 class="font-weight-bold mb-4">Beloved</h5>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  nam, aperiam minima assumenda.</p>
              </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row mb-2">
              <div class="col-2">
                <i class="fas fa-2x fa-bolt purple-text"></i>
              </div>
              <div class="col-10">
                <h5 class="font-weight-bold mb-4">Rapid</h5>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  nam, aperiam minima assumenda.</p>
              </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row mb-2">
              <div class="col-2">
                <i class="fas fa-2x fa-magic pink-text"></i>
              </div>
              <div class="col-10">
                <h5 class="font-weight-bold mb-4">Magical</h5>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  nam, aperiam minima assumenda.</p>
              </div>
            </div>
            <!--Grid row-->

          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--/Section: Features v.4-->

      <hr class="mb-5">

      <!--Section: Testimonials v.3-->
      <section class="section team-section text-center pb-3 wow fadeIn" data-wow-delay="0.3s">

        <!--Section heading-->
        <h1 class="font-weight-bold text-center h1 my-5">Testimonials</h1>
        <!--Section description-->
        <p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
          quisquam eum porro a pariatur accusamus veniam.</p>

        <!--Grid row-->
        <div class="row text-center">

          <!--Grid column-->
          <div class="col-md-4 mb-4">

            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
              </div>

              <!--Content-->
              <h4 class="font-weight-bold mt-4 mb-3">Anna Deynah</h4>
              <h6 class="mb-3 font-weight-bold grey-text">Web Designer</h6>
              <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos
                id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>

              <!--Review-->
              <div class="orange-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star-half-alt"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 mb-4">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1 img-fluid">
              </div>

              <!--Content-->
              <h4 class="font-weight-bold mt-4 mb-3">John Doe</h4>
              <h6 class="mb-3 font-weight-bold grey-text">Web Developer</h6>
              <p><i class="fas fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
                suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>

              <!--Review-->
              <div class="orange-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 mb-4">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4 mb-3">Maria Kate</h4>
              <h6 class="mb-3 font-weight-bold grey-text">Photographer</h6>
              <p><i class="fas fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui
                blanditiis praesentium voluptatum deleniti atque corrupti.</p>

              <!--Review-->
              <div class="orange-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="far fa-star"> </i>
              </div>

            </div>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--Section: Testimonials v.3-->

      <hr class="mb-5">

      <!-- Section: Pricing v.3 -->
      <section class="text-center my-5 wow fadeIn" data-wow-delay="0.3s">

        <!-- Section heading -->
        <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
        <!-- Section description -->
        <p class="text-center w-responsive mx-auto mb-5 grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
          quisquam eum porro a pariatur veniam.</p>

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">

            <!-- Card -->
            <div class="card">

              <!-- Content -->
              <div class="card-body">

                <!-- Offer -->
                <h5 class="mb-4">Basic plan</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fas fa-home light-blue-text"></i>
                  </div>
                </div>

                <!-- Price -->
                <h2 class="font-weight-bold my-4">59$</h2>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis
                  accusamus deleniti cumque hic laborum.</p>
                <a class="btn btn-light-blue btn-rounded">Buy now</a>

              </div>
              <!-- Content -->

            </div>
            <!-- Card -->

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-lg-4 col-md-6 mb-md-0 mb-4">

            <!-- Card -->
            <div class="card purple-gradient">

              <!-- Content -->
              <div class="card-body white-text">

                <!-- Offer -->
                <h5 class="mb-4">Premium plan</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fas fa-users"></i>
                  </div>
                </div>

                <!--Price -->
                <h2 class="font-weight-bold my-4">79$</h2>
                <p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate
                  sequi atque.</p>
                <a class="btn btn-outline-white btn-rounded">Buy now</a>

              </div>
              <!-- Content -->

            </div>
            <!-- Card -->

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-lg-4 col-md-6">

            <!-- Card -->
            <div class="card">

              <!-- Content -->
              <div class="card-body">

                <!-- Offer -->
                <h5 class="mb-4">Advanced plan</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fas fa-chart-bar light-blue-text"></i>
                  </div>
                </div>

                <!--Price -->
                <h2 class="font-weight-bold my-4">99$</h2>
                <p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium
                  repellat eveniet quia vitae.</p>
                <a class="btn btn-light-blue btn-rounded">Buy now</a>

              </div>
              <!-- Content -->

            </div>
            <!-- Card -->

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

      </section>
      <!-- Section: Pricing v.3 -->

      <hr class="mb-5">

      <!--Section: Contact v.2-->
      <section class="section pb-5 wow fadeIn" data-wow-delay="0.3s">

        <!--Section heading-->
        <h2 class="font-weight-bold text-center h1 my-5">Contact us</h2>
        <!--Section description-->
        <p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
          quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

        <div class="row">

          <!--Grid column-->
          <div class="col-md-8 col-xl-9">
            <form>

              <!--Grid row-->
              <div class="row">

                <!--Grid column-->
                <div class="col-md-6">
                  <div class="md-form">
                    <input type="text" id="contact-name" class="form-control">
                    <label for="contact-name" class="">Your name</label>
                  </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6">
                  <div class="md-form">
                    <input type="text" id="contact-email" class="form-control">
                    <label for="contact-email" class="">Your email</label>
                  </div>
                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row">
                <div class="col-md-12">
                  <div class="md-form">
                    <input type="text" id="contact-Subject" class="form-control">
                    <label for="contact-Subject" class="">Subject</label>
                  </div>
                </div>
              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row">

                <!--Grid column-->
                <div class="col-md-12">

                  <div class="md-form">
                    <textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
                    <label for="contact-message">Your message</label>
                  </div>

                </div>
              </div>
              <!--Grid row-->

            </form>

            <div class="text-center text-md-left my-4">
              <a class="btn btn-light-blue btn-rounded">Send</a>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 col-xl-3">
            <ul class="contact-icons text-center list-unstyled">
              <li><i class="fas fa-map-marker fa-2x"></i>
                <p>San Francisco, CA 94126, USA</p>
              </li>

              <li><i class="fas fa-phone fa-2x"></i>
                <p>+ 01 234 567 89</p>
              </li>

              <li><i class="fas fa-envelope fa-2x"></i>
                <p>contact@mdbootstrap.com</p>
              </li>
            </ul>
          </div>
          <!--Grid column-->

        </div>

      </section>
      <!--Section: Contact v.2-->

    </div>

  </main>
  <!--Main Layout-->


  <!--Footer-->
  <footer class="page-footer pt-4 mt-4   text-center text-md-left mt-5">

    <!--Footer Links-->
    <div class="container">
      <div class="row">

        <!--First column-->
        <div class="col-md-3">
          <h5 class="text-uppercase">Footer Content </h5>
          <p>Here you can use rows and columns here to organize your footer content.</p>
        </div>
        <!--/.First column-->

        <hr class="w-100 clearfix d-md-none">

        <!--Second column-->
        <div class="col-md-2 ml-auto">
          <h5 class="text-uppercase">Links</h5>
          <ul class="list-unstyled">
            <li><a href="#!">Link 1</a></li>
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        <!--/.Second column-->

        <hr class="w-100 clearfix d-md-none">

        <!--Third column-->
        <div class="col-md-2 ml-auto">
          <h5 class="text-uppercase">Links</h5>
          <ul class="list-unstyled">
            <li><a href="#!">Link 1</a></li>
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        <!--/.Third column-->

        <hr class="w-100 clearfix d-md-none">

        <!--Fourth column-->
        <div class="col-md-2 ml-auto">
          <h5 class="text-uppercase">Links</h5>
          <ul class="list-unstyled">
            <li><a href="#!">Link 1</a></li>
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        <!--/.Fourth column-->

      </div>
    </div>

    <hr>

    <div class="container">
      <!--Grid row-->
      <div class="row mb-3">

        <!--First column-->
        <div class="col-md-12">

          <ul class="list-unstyled d-flex justify-content-center mb-0 py-4 list-inline">
            <li class="list-inline-item"><a class="p-2 m-2 fa-lg fb-ic"><i class="fab fa-facebook-f white-text fa-lg">
                </i></a></li>
            <li class="list-inline-item"><a class="p-2 m-2 fa-lg tw-ic"><i class="fab fa-twitter white-text fa-lg"> </i></a></li>
            <li class="list-inline-item"><a class="p-2 m-2 fa-lg gplus-ic"><i class="fab fa-google-plus-g white-text fa-lg">
                </i></a></li>
            <li class="list-inline-item"><a class="p-2 m-2 fa-lg li-ic"><i class="fab fa-linkedin-in white-text fa-lg">
                </i></a></li>
            <li class="list-inline-item"><a class="p-2 m-2 fa-lg ins-ic"><i class="fab fa-instagram white-text fa-lg">
                </i></a></li>
            <li class="list-inline-item"><a class="p-2 m-2 fa-lg pin-ic"><i class="fab fa-pinterest white-text fa-lg">
                </i></a></li>
          </ul>

        </div>
        <!--/First column-->
      </div>
      <!--/Grid row-->
    </div>
    <!--/.Footer Links-->

    <!--Copyright-->
    <div class="footer-copyright py-3 text-center">
      <div class="container-fluid">
        © 2019 Copyright: <a href="https://mdbootstrap.com/docs/jquery/"> MDBootstrap.com </a>

      </div>
    </div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->


  <!--  SCRIPTS  -->
  <!-- JQuery -->
  <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="../js/mdb.min.js"></script>
  <script>
    new WOW().init();

  </script>
</body>

</html>
